<template>
  <div class="wrapper">
    <div ref="editor"></div>
  </div>
</template>

<script>
import Wangeditor from 'wangeditor'
import axios from 'axios'
export default {
  components: {},
  props: {
    defaultMsg: String
  },
  data() {
    return {
      editor: null,
      editorVal: ''
    }
  },
  watch: {
    defaultMsg() {
      this.editor.txt.html(this.defaultMsg)
    },
    //为了解决实时显示编辑器内容
    editorVal() {
      this.$emit('getEditorHtml', this.editorVal)
    }
  },
  computed: {},
  methods: {
    getContain() {
      return this.editor.txt.html()
    }
  },
  created() {
  },
  mounted() {
    //实例化一个编辑器
    const editor = new Wangeditor(this.$refs.editor)

    editor.config.menus = [
      'head',
      'bold',
      'fontSize',
      'fontName',
      'italic',
      'underline',
      'strikeThrough',
      'indent',
      'lineHeight',
      'foreColor',
      'backColor',
      'link',
      'list',
      'todo',
      'justify',
      'quote',
      'emoticon',
      'image',
      'video',
      'table',
      // 'code',
      'splitLine',
      'undo',
      'redo'
    ]
    // 配置 onchange 回调函数
    editor.config.onchange = newHtml => {
      this.editorVal = newHtml
    }


    editor.config.customUploadImg = function (resultFiles, insertImgFn) {
      var forms = new FormData()
      forms.append('upfile', resultFiles[0])
      axios({
        method: 'POST',
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        url: appConfig.baseUrl + '/coroutine/picture/file/upload',
        withCredentials: true,
        data: forms
      }).then(res => {
        if (res.data.status) {
          insertImgFn(res.data.data.cloudDomain + '/' + res.data.data.image_path)
        } else {
          this.$message.error(res.data.message)
        }
      })
    }

    editor.config.zIndex = 500

    editor.create()
    this.editor = editor
    // 初始化值
    this.editor.txt.html(this.defaultMsg)
  }
}
</script>
<style lang="" scoped>
</style>
